<template>
	 <div class="mallDetail flexv">
		 <!-- 头部 -->
		 <pubHead title="商品详情"></pubHead>
		 <!-- 轮播图 -->
		 <div class="swipe_box" v-if="goods_info.img">
		     <van-swipe class="swpier" :loop="true" :autoplay="3000" :show-indicators="true">
		         <van-swipe-item class="swiper_item" v-for="item in goods_info.img" :key="item">
		             <img :src="item" alt="">
		         </van-swipe-item>
		     </van-swipe>
		 </div>
		 <div class="good-detail">
			 <div class="good-top twoline">
				 {{goods_info.title}}
			 </div>
			 <div class="good-bottom flex jus-b ali-b">
				 <div>
					 <span class="good-1">{{goods_info.integral}}</span>
					 <span class="good-2">积分</span>
					 <!-- <span class="good-3">￥4099</span> -->
				 </div>
				<div class="good-b-r">
					剩余{{goods_info.inventory}}件
				</div>
			 </div>
		 </div>
		 <div class="good-dec">
			 <div class="good-dec-t">
				 图文详情
			 </div>
			 <div class="article" v-html="goods_info.content"></div>
		 </div>
		 <div class="good-foot" @click="exchange">
			 马上兑换
		 </div>
	 </div>
</template>
<script>
	import pubHead from '@/components/head';
	import {getMallDetail,getIntegralOrder} from '@/request/api.js'
	import { Toast, Swipe, SwipeItem, Popup, Dialog  } from 'vant';
	export default{
		data(){
			return{
				good_id:0,
				goods_info:''
			}
			
		},
		created(){
			this.good_id = this.$route.query.id
			this.getData()
		},
		components: {
		    pubHead,
		    "van-swipe": Swipe,
		    "van-swipe-item": SwipeItem,
		    "van-popup": Popup,
		},
		methods:{
			getData(){
				let that = this
				getMallDetail({
					token:localStorage.getItem('token'),
					goods_id:that.good_id
				}).then(res=>{
					if(res.code==1)
					{
						that.goods_info = res.data.info
					}
				})
			},
			exchange(){
					let that = this
					Dialog.confirm({
						title:'温馨提示',
						message:"确定兑换此商品吗？"
					})
					.then(()=>{
						getIntegralOrder({
							token:localStorage.getItem('token'),
							goods_id:that.good_id
						}).then(res=>{
							if(res.code==1){
								that.$router.push('/mallSuccess')
							}else{
								that.$tip(res.msg)
							}
						})
					})
					.catch(()=>{
						
					})
			}
		}
	}
	
</script>
<style lang="less">
	.mallDetail{
		min-height: 100vh;
		background-color: #f5f5f5;
		// 轮播图
		.swipe_box{
		    width: 100%;
		    max-width: 750px;
		    margin: 0 auto;
		    height: 7.5rem;
		    position: relative;
		    .swiper_item{
		        height: 7.5rem;
		        img{
		            width: 100%;
		            height: 100%;
		        }
		    }
		    .swipe_index{
		        width: 0.8rem;
		        height: 0.4rem;
		        position: absolute;
		        z-index: 1;
		        bottom: 0.3rem;
		        right: 0.3rem;
		        border-radius: 0.2rem;
		        font-size: 0.22rem;
		        line-height: 0.4rem;
		        background-color: rgba(0,0,0,0.4);
		    }
		}
		.good-detail{
			border-top:#dbdbdb solid 0.01rem;
			padding: 0.2rem;
			background-color: #fff;
			.good-top{
				color: #333;
				font-size: 0.28rem;
			}
			.good-bottom{
				margin-top: 0.2rem;
				.good-1{
					color:#EE1C1A ;
					font-size: 0.4rem;
					margin-right: 0.1rem;
				}
				.good-2{
					color:#EE1C1A ;
					font-size: 0.24rem;
				}
				.good-3{
					color:#b2b2b2 ;
					font-size: 0.26rem;
					text-decoration: line-through;
				}
				.good-b-r{
					color: #b2b2b2;
					font-size: 0.24rem;
				}
			}
		}
		.good-dec{
			padding: 0.2rem;
			margin-top: 0.2rem;
			background-color: #fff;
			padding-bottom: 0.93rem;
			.good-dec-t{
				color: #EE1C1A;
				font-size: 0.3rem;
				padding-top: 0.1rem;
				padding-bottom: 0.3rem;

				.article{
				    background-color: #fff;
				    img{
				        width: 100%;
				        height: 100%;
				    }
				}
			}
		}
		.good-foot{
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 0.93rem;
			text-align: center;
			line-height: 0.93rem;
			background-color: #50AD22;
			color: #fff;
			font-size: 0.32rem;
		}
	}
</style>